<template>
	<view class="content">
		<view class="article">
			<view class='article-title'>{{info.title}}</view>
<!-- 			<view class='list acea-row row-middle'>
				<view class='label'>{{info.author}}</view>
				<view class='item'></text>{{info.create_time}}</view>				
			</view> -->
			<view v-if="videoUrl" class="video">
				<video class="myVideo" @timeupdate="videoTimeUpdateEvent" id="myVideo" :src="videoUrl" object-fit="cover" loop :controls="showControls" enable-play-gesture :direction="0">
					<cover-view @click="getVideo" v-if="showVideo" class="videoBtn">购买视频</cover-view>
				</video>
			</view>
			
			<view class="article-content"><jshopContent :content="content" v-if="content"></jshopContent></view>
		</view>
	</view>
</template>

<script>
import jshopContent from '@/components/jshop/jshop-content.vue';
export default {
	components: {
		jshopContent
	},
	data() {
		return {
			idType: 1, //1文章 2公告 3微信图文消息
			id: 0,
			info: {},
			content:'',
            shareUrl: '/pages/share/jump',
			videoUrl:'',
			videoContext: {},  // 用于绑定视频标签
			showVideo:false,
			showControls:true,
			is_show:''
		};
	},
	onLoad(e) {
		this.idType = e.id_type;
		this.id = e.id;
		if (!this.idType && !this.id) {
			this.$common.errorToShow('请求出错', res => {
				uni.switchTab({
					url: '/pages/index/index'
				});
			});
		} 
		if (this.idType == 1) {
			this.articleDetail();
		} 
	},
	created() {
		// 创建视频实例指向视频控件
		this.videoContext = uni.createVideoContext('myVideo');
	},
	computed: {
		shopName() {
			return this.$store.state.config.site_name;
		},
		shopLogo() {
			return this.$store.state.config.site_logo;
		}
	},
	methods: {
		videoTimeUpdateEvent(e) {
			// e.detail.currentTime为每次触发时,视频的当前播放时间
			let currentTime = Number(e.detail.currentTime);
			// 试看结束 this.class_info.freed_time为试看时间
			if(this.is_show == 1) {
				return
			}else {
				if (currentTime >= 2) {
					// 试看结束,在这做一些想做的操作,例如停止视频播放
					this.videoContext.exitFullScreen();
					this.videoContext.pause();
					this.videoContext.seek(2);
					this.showVideo = true
					this.showControls = false
				}
			}
		},
		// 购买视频
		getVideo() {
			this.$api.getStrategDetail({
				id:this.id
			},res => {
				if(res.status == 200) {
					this.$common.successToShow(res.message)
					this.is_show = 1
					this.showVideo = false
					this.showControls = true
				}else {
					this.$common.errorToShow(res.message)
				}
			})
		},
		articleDetail() {
			this.$api.articleInfo(this.id,res => {
				uni.showLoading({
					title: '正在加载'
				}); 
				if (res.status) {
					this.info = res.data;
					this.content = res.data.content.content;
					this.videoUrl = res.data.video_url
					this.is_show = res.data.is_show
					uni.setNavigationBarTitle({
						title: res.data.title
					});
				} else {
					this.$common.errorToShow(res.msg, res => {
						uni.navigateBack({
							delta: 1
						});
					}); 
				}
				setTimeout(function () {
					uni.hideLoading();
				}, 2000);
				
			});
		},
		noticeDetail() {
			let data = {
				id: this.id
			};
			this.$api.noticeInfo(data, res => {
				if (res.status) {
					this.info = res.data;
					uni.setNavigationBarTitle({
						title: this.info.title
					});
				} else {
					this.$common.errorToShow(res.msg);
				}
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fff !important;
}
		
.content {
	/*  #ifndef  H5  */
	height: 100vh;
	/*  #endif  */
	background-color: #fff;
}

.article {
	padding: 20upx;
}

.article-title {
	padding: 0 30rpx;
	font-size: 34rpx;
	color: #282828;
	font-weight: bold;
	margin: 45rpx 0 23rpx 0;
	line-height: 1.5;
}

.video {
	position: relative;
}

.video .myVideo {
	width: 710rpx;
}

.video .myVideo .videoBtn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 150rpx;
	height: 70rpx;
	text-align: center;
	line-height: 60rpx;
	background-color: #FF7340;
	border-radius: 50rpx; 
	color: #FFFFFF;
} 

.article .list {
	margin: 0 30rpx;
	padding-bottom: 25rpx;
}

.article .list .label {
	font-size: 30rpx;
	color: #B1B2B3;
}

.article .list .item {
	margin-left: 27rpx;
	font-size: 30rpx;
	color: #B1B2B3;
}


.article-time {
	margin-left: 20upx;
}

.article-content {
	font-size: 28upx !important;
	color: #666;
	line-height: 1.6;
	margin-top: 20upx;
}

.article-content p img {
	width: 100% !important;
}

.shop-logo {
	width: 60upx;
	height: 60upx;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.shop-name {
	line-height: 100upx;
	margin-left: 80upx;
}
</style>
